<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <script type="text/javascript" src="../../js/commonCss.js"></script>
    <link rel="stylesheet" type="text/css" href="../../styles/common.css" />
</head>
<body>
<div class="definewidth">
    <button type="button" class="btn btn-success top-back" id="backbtn">返回</button>
    <div class="div-echart ">
        <div id="main" style="width: 600px;height:400px;" class="center-block">
        </div>
    </div>

</div>
<script src="../../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../libs/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/echarts.min.js"></script>
<script type="text/javascript" src="../../js/formatTime.js"></script>

<script type="text/javascript">
    var userId = getQueryString('id');
    var startTime = getQueryString('startTime');
    var endTime = getQueryString('endTime');
    var userName = getQueryString('userName');
    var xAxisData = [];
    var seriesData = [];
    $.ajax({
        type: "POST",
        url: ctx + "/projectTasktime/taskTimeStaffChange",
        data:{
            userId: userId,
            startTime: startTime,
            endTime: endTime
        },
        success: function(data){
            if(data.code == 200){
                xAxisData = data.data.map(function (item) {
                    return  $.myTime.UnixToDate(Number(item.tasktimeDate))
                })
                seriesData =  data.data.map(function (item) {
                    return item.tasktime.toFixed(1)
                })
                setEchart('main')
            } else {
                alert(data.msg)
            }
        }
    });
    var setEchart = function (eleId) {
        var myChart = echarts.init(document.getElementById(eleId));
        var option = {
            title : {
                text: userName+'\n员工人天变化趋势',
                subtext:'日期范围：'+startTime+"至"+endTime +'    人天总计：'+ getQueryString('taskTime') ,
                x:'center'
            },
            color: ['#db001a'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                top: '20%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : xAxisData,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [
                {
                    name:'人天',
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'人天',
                    type:'bar',
                    barWidth: '60%',
                    itemStyle: {
                        normal:{
                            label:{
                                show: true,
                                position:'top',
                                formatter: '{c}' ,
                                textStyle:{
                                    color:'#000'
                                }
                            }

                        }
                    },
                    data:seriesData
                }
            ]
        };
        myChart.setOption(option);

        myChart.on("click",function(params){
            var month=params.name;
            var value = params.value;
            top.topManager.openPage({
                id:'Staff/change/'+ userId+month,
                title: month + userName + '人天分布',
                href:'Staff/projectspread.html?id='+userId+'&startTime='+month+'&endTime='+month
                +'&userName='+encodeURI(userName)+'&taskTime='+value+'&parentPageId='+top.topManager.getPageId()
            });
        });

    }

    $("#backbtn").click(function () {
        /*window.location.href = "list.html";*/
        top.topManager.openPage({
            id : 'Staff/list.html',
            isClose : true
        });

    });
</script>
</body>
</html>